<template>
  <div class="box">
    <div>
      <div>
        <el-card class="card-01">
          <div class="zhpj">
            <span class="zhpj-span">综合评价</span>
          </div>
          <div class="echarts-01">
            <div class="lh-css" v-show="state.shu1 == '1'">舒适</div>
            <div class="lh-css" v-show="state.shu1 == '2'">良好</div>
            <div class="lh-css" v-show="state.shu1 == '3'">糟糕</div>
            <div class="wdsd-css">
              <div>
                <div class="dushu-01">
                  <p class="wendu">温度</p>
                  <p class="dushu">
                    {{ state.wen1 }}<span class="spancdu">℃</span>
                  </p>
                  <p class="fangwei">（18~20）</p>
                </div>
                <div>
                  <p class="wendu">二氧化碳</p>
                  <p class="dushu">
                    {{ state.er1 }}<span class="spancdu">ppm</span>
                  </p>
                  <p class="fangwei">（≤1,000）</p>
                </div>
              </div>

              <div>
                <div class="dushu-01">
                  <p class="wendu">湿度</p>
                  <p class="dushu">
                    {{ state.shi1 }}<span class="spancdu">%</span>
                  </p>
                  <p class="fangwei">（30~60）</p>
                </div>
                <div>
                  <p class="wendu">PM2.5</p>
                  <p class="dushu">
                    {{ state.pm1 }}<span class="spancdu">µg/m³</span>
                  </p>
                  <p class="fangwei">（≤1,000）</p>
                </div>
              </div>
            </div>
          </div>
          <div class="echats-main">
            <div id="main" style="width: 500px; height: 200px"></div>
            <div class="title-echrts">总体趋势</div>
            <div class="select-css">
              <el-select placeholder="CO₂">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </div>

            <div class="selectRiqi">
              <el-date-picker
                v-model="datetime"
                type="date"
                placeholder="请选择日期"
              />
            </div>
          </div>
        </el-card>
      </div>

      <div>
        <div>
          <el-card class="card-02">
            <div class="zhpj">
              <span class="zhpj-span">典型点位信息</span>
            </div>

            <!-- 办公大堂 -->
            <div class="bangong">办公大堂</div>
            <div class="echarts-01">
              <div class="lh-css" v-show="state.shu2 == '1'">舒适</div>
              <div class="lh-css" v-show="state.shu2 == '2'">良好</div>
              <div class="lh-css" v-show="state.shu2 == '3'">糟糕</div>
              <div class="wdsd-css">
                <div>
                  <div class="dushu-01">
                    <p class="wendu">温度</p>
                    <p class="dushu">
                      {{ state.wen2 }}<span class="spancdu">℃</span>
                    </p>
                    <p class="fangwei">（18~20）</p>
                  </div>
                  <div>
                    <p class="wendu">二氧化碳</p>
                    <p class="dushu">
                      {{ state.er2 }}<span class="spancdu">ppm</span>
                    </p>
                    <p class="fangwei">（≤1,000）</p>
                  </div>
                </div>

                <div>
                  <div class="dushu-01">
                    <p class="wendu">湿度</p>
                    <p class="dushu">
                      {{ state.shi2 }}<span class="spancdu">%</span>
                    </p>
                    <p class="fangwei">（30~60）</p>
                  </div>
                  <div>
                    <p class="wendu">PM2.5</p>
                    <p class="dushu">
                      {{ state.pm2 }}<span class="spancdu">µg/m³</span>
                    </p>
                    <p class="fangwei">（≤1,000）</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="echats-main">
              <div id="main2" style="width: 500px; height: 200px"></div>
              <div class="title-echrts">趋势</div>
              <div class="select-css">
                <el-select placeholder="PM2.5">
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </div>

              <div class="selectRiqi">
                <el-date-picker
                  v-model="datetime"
                  type="date"
                  placeholder="请选择日期"
                />
              </div>
              <div class="xuxian"></div>
            </div>

            <!-- 办公区域 -->
            <div>
              <div class="bangong1">办公区域</div>
              <div class="echarts-02">
                <div class="lh-css" v-show="state.shu2 == '1'">舒适</div>
                <div class="lh-css" v-show="state.shu2 == '2'">良好</div>
                <div class="lh-css" v-show="state.shu2 == '3'">糟糕</div>
                <div class="wdsd-css">
                  <div>
                    <div class="dushu-01">
                      <p class="wendu">温度</p>
                      <p class="dushu">
                        {{ state.wen3 }}<span class="spancdu">℃</span>
                      </p>
                      <p class="fangwei">（18~20）</p>
                    </div>
                    <div>
                      <p class="wendu">二氧化碳</p>
                      <p class="dushu">
                        {{ state.er3 }}<span class="spancdu">ppm</span>
                      </p>
                      <p class="fangwei">（≤1,000）</p>
                    </div>
                  </div>

                  <div>
                    <div class="dushu-01">
                      <p class="wendu">湿度</p>
                      <p class="dushu">
                        {{ state.shi3 }}<span class="spancdu">%</span>
                      </p>
                      <p class="fangwei">（30~60）</p>
                    </div>
                    <div>
                      <p class="wendu">PM2.5</p>
                      <p class="dushu">
                        {{ state.pm3 }}<span class="spancdu">µg/m³</span>
                      </p>
                      <p class="fangwei">（≤1,000）</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="echats-main">
                <div id="main3" style="width: 500px; height: 200px"></div>
                <div class="title-echrts">趋势</div>
                <div class="select-css">
                  <el-select placeholder="温度">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </div>

                <div class="selectRiqi">
                  <el-date-picker
                    v-model="datetime"
                    type="date"
                    placeholder="请选择日期"
                  />
                </div>
                <div class="xuxian"></div>
              </div>
            </div>

            <!-- 商业区域 -->
            <div>
              <div class="bangong1">商业区域</div>
              <div class="echarts-02">
                <div class="lh-css" v-show="state.shu4 == '1'">舒适</div>
                <div class="lh-css" v-show="state.shu4 == '2'">良好</div>
                <div class="lh-css" v-show="state.shu4 == '3'">糟糕</div>
                <div class="wdsd-css">
                  <div>
                    <div class="dushu-01">
                      <p class="wendu">温度</p>
                      <p class="dushu">
                        {{ state.wen4 }}<span class="spancdu">℃</span>
                      </p>
                      <p class="fangwei">（18~20）</p>
                    </div>
                    <div>
                      <p class="wendu">二氧化碳</p>
                      <p class="dushu">
                        {{ state.er4 }}<span class="spancdu">ppm</span>
                      </p>
                      <p class="fangwei">（≤1,000）</p>
                    </div>
                  </div>

                  <div>
                    <div class="dushu-01">
                      <p class="wendu">湿度</p>
                      <p class="dushu">
                        {{ state.shi4 }}<span class="spancdu">%</span>
                      </p>
                      <p class="fangwei">（30~60）</p>
                    </div>
                    <div>
                      <p class="wendu">PM2.5</p>
                      <p class="dushu">
                        {{ state.pm4 }}<span class="spancdu">µg/m³</span>
                      </p>
                      <p class="fangwei">（≤1,000）</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="echats-main">
                <div id="main4" style="width: 500px; height: 200px"></div>
                <div class="title-echrts">趋势</div>
                <div class="select-css">
                  <el-select placeholder="温度">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </div>

                <div class="selectRiqi">
                  <el-date-picker
                    v-model="datetime"
                    type="date"
                    placeholder="请选择日期"
                  />
                </div>
                <div class="xuxian"></div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <div>
      <el-card class="card-03">
        <div class="zhpj">
          <span class="zhpj-span">防疫模式</span>
        </div>

        <div class="switch-css">
          <div>
            <span>商场区域</span>
            <el-switch v-model="value1" class="mb-2" />
          </div>
          <div>
            <span>办公大厅</span>
            <el-switch v-model="value2" class="mb-2" />
          </div>

          <div>
            <span>办公区域（走道？典型办公室？）</span>
            <el-switch v-model="value3" class="mb-2" />
          </div>
        </div>
      </el-card>

      <el-card class="card-04">
        <div class="zhpj">
          <span class="zhpj-span">区域舒适性</span>

          <div class="anniu">
            <div
              :class="indexValue == 0 ? 'bccolorDiv' : 'Div'"
              @click="qiehuan(0)"
            >
              <span> 温度场</span>
            </div>
            <div
              :class="indexValue == 1 ? 'bccolorDiv' : 'Div'"
              @click="qiehuan(1)"
            >
              <span> 湿度场</span>
            </div>
            <div
              :class="indexValue == 2 ? 'bccolorDiv' : 'Div'"
              @click="qiehuan(2)"
            >
              <span> CO₂场</span>
            </div>
            <div
              :class="indexValue == 3 ? 'bccolorDiv' : 'Div'"
              @click="qiehuan(3)"
            >
              <span>PM场</span>
            </div>
          </div>
        </div>

        <div class="block">
          <el-date-picker
            v-model="datetimes"
            type="date"
            placeholder="请选择时间"
          />
        </div>
        <div v-show="indexValue == 0">
          <div id="main5" style="width: 800px; height: 882px"></div>
        </div>

        <div v-show="indexValue == 1">
          <div id="main7" style="width: 800px; height: 882px"></div>
        </div>

        <div v-show="indexValue == 2">
          <div id="main8" style="width: 800px; height: 882px"></div>
        </div>

        <div v-show="indexValue == 3">
          <div id="main9" style="width: 800px; height: 882px"></div>
        </div>
      </el-card>

      <el-card class="card-05">
        <div class="zhpj">
          <span class="zhpj-span">相关性分析</span>
          <div class="select-css">
            <div class="select01">
              <el-select placeholder="温度">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>

            <div class="select02">
              <el-select placeholder="CO₂">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </div>

            <div class="block_time">
              <el-date-picker
                v-model="start_end_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </div>
          </div>
        </div>
        <div class="main6">
          <div class="dwxshi">单位显示</div>
          <div id="main6" style="width: 800px; height: 265px"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import packagingEchats from "@/components/packagingEchats/index";
import { Analysis, Scalar } from "@/api/model/echarts";
import * as echarts from "echarts";

const value1 = ref(true);
const value2 = ref(true);
const value3 = ref(true);
const indexValue = ref(0);
const datetimes = ref("");
const start_end_time = ref("");
const qiehuan = (i) => {
  indexValue.value = i;
};
const options = reactive([
  {
    value: "温度",
    label: "温度",
  },
  {
    value: "湿度",
    label: "湿度",
  },
  //   {
  //     value: 'co2',
  //     label: 'co2',
  //   },
  //   {
  //     value: 'PM2.5',
  //     label: 'pm2.5',
  //   },
]);
const state = reactive({
  f: {
    indicatorName: "相关性分析",
    firstType: "数据分析",
    secondType: "",
    thirdType: "",
    dataType: "hour",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    projectId: "1",
  },

  // 综合评价
  shu1: "",
  wen1: "",
  er1: "",
  pm1: "",
  shi1: "",

  // 办公大堂
  shu2: "",
  wen2: "",
  er2: "",
  pm2: "",
  shi2: "",

  // 办公区域
  shu3: "",
  wen3: "",
  er3: "",
  pm3: "",
  shi3: "",
  // 办公区域
  shu4: "",
  wen4: "",
  er4: "",
  pm4: "",
  shi4: "",
});

onMounted(() => {
  getZongHe();

  packagingEchats();
  getBanGong();
  getQuYu();
  getShangYe();
  F();
});
async function F() {
  console.log("F触发");
  let res = await Analysis(state.f);
  var byear = [];
  var shuju = [];
  var num = [];
  var num2 = [];
  console.log(res, "相关性分析");
  res.data.commonHourlyDataList.forEach((item) => {
    byear.push(`${item.day.substring(0, 10)}`);
    if (item.hour % 2 == 0) {
      shuju.push(item.hour);
    }
    num.push(item.number1);
    num2.push(item.number2);
  });
  console.log(byear);
  console.log(shuju, "shujulist");
  let list = [...new Set(shuju)];
  console.log(list, "去重后的时间");

  let myChart6 = echarts.init(document.getElementById("main6"));
  myChart6.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      data: ["室外", "室内"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: list,
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: num,
      },
      {
        name: "室外",
        type: "line",
        stack: "Total",

        lineStyle: { color: "#325bd0" },
        itemStyle: { color: "#325bd0" },
        data: num2,
      },
    ],
  });
}
const getZongHe = async () => {
  console.log("getZongHe触发");
  let obj = {
    dataType: "hour",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "数据分析",
    indicatorName: "总体趋势",
    thirdType: "co2",
  };
  let obj2 = {
    dataType: "scalar",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "",
    indicatorName: "国内标准",
    thirdType: "",
  };
  let obj3 = {
    dataType: "scalar",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "",
    indicatorName: "世卫标准",
    thirdType: "",
  };
  let obj4 = {
    dataType: "scalar",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "",
    indicatorName: "综合评价",
    thirdType: "",
  };
  let data = []; // 时间
  let data1 = []; // type1数据
  let data2 = []; // type2数据
  let data3 = []; // type3数据
  // 国内标准
  let internal = [];
  // 世卫标准
  let world = [];

  let res = await Analysis(obj);
  let res2 = await Scalar(obj2);
  let res3 = await Scalar(obj3);
  let res4 = await Scalar(obj4);

  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type === "type1") {
        data1.push(item.number1);
      } else if (item.type === "type2") {
        data2.push(item.number1);
      } else if (item.type === "type3") {
        data3.push(item.number1);
      }
      data.push(item.hour);
    });
  }
  if (res2.code == 200) {
    internal = res2.data.scalarList;
  }
  if (res3.code == 200) {
    world = res3.data.scalarList;
  }
  if (res4.code == 200) {
    console.log(res4, "res444444444444444444444444444444");
    state.shu1 = res4.data.scalarList[0].data;
    state.wen1 = res4.data.scalarList[1].data;
    // state.er1 = res4.data.scalarList[7].data
    // state.pm1 = res4.data.scalarList[9].data
    // state.shi1 = res4.data.scalarList[4].data
  }
  // console.log(ds, "data")
  let myChart = echarts.init(document.getElementById("main"));
  myChart.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      data: ["室外", "室内"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "02:00",
        "04:00",
        "06:00",
        "08:00",
        "10:00",
        "12:00",
        "14:00",
        "16:00",
        "18:00",
        "20:00",
        "22:00",
        "24:00",
      ],
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        data: data1,
        //设置基准线
        markLine: {
          symbol: "none", //去掉箭头
          lineStyle: {
            type: "solid",
            color: "#e76f70", // 这儿设置安全基线颜色
            width: 3,
          },
          data: [
            {
              yAxis: internal[0].data,
              lineStyle: { color: "#23bb68" },
              label: {
                color: "#7E7E7E",
                formatter: "国内标准",
                position: "insideEndTop",
                fontSize: 12,
              },
            },
            {
              yAxis: world[0].data,
              lineStyle: { color: "#f3f3f3" },
              label: {
                color: "#7E7E7E",
                formatter: "世卫标准",
                position: "insideEndTop",
                fontSize: 12,
              },
            },
          ],
          label: {
            show: true,
          },
        },
      },
      {
        name: "室外",
        type: "line",
        stack: "Total",
        data: data2,
      },
    ],
  });
};

const getBanGong = async () => {
  console.log("getBanGong触发");
  let obj = {
    dataType: "hour",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "数据分析",
    indicatorName: "办公大堂-趋势",
    thirdType: "co2",
  };

  let obj4 = {
    dataType: "scalar",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "",
    indicatorName: "办公大堂",
    thirdType: "",
  };
  let data = []; // 时间
  let data1 = []; // type1数据
  let data2 = []; // type2数据
  let data3 = []; // type3数据
  let res = await Analysis(obj);
  let res4 = await Scalar(obj4);
  console.log(res4, "asdasdasdasdadsadadas");
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(item.hour);
    });
  }
  if (res4.code == 200) {
    console.log(res4, "res444444444444444444");
    state.shu2 = res4.data.scalarList[1].data;
    // state.wen2 = res4.data.scalarList[3].data
    // state.er2 = res4.data.scalarList[2].data
    // state.pm2 = res4.data.scalarList[4].data
    state.shi2 = res4.data.scalarList[0].data;
  }
  let myChart2 = echarts.init(document.getElementById("main2"));
  myChart2.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },

    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      data: ["室外", "室内"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "02:00",
        "04:00",
        "06:00",
        "08:00",
        "10:00",
        "12:00",
        "14:00",
        "16:00",
        "18:00",
        "20:00",
        "22:00",
        "24:00",
      ],
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
        //设置基准线
        markLine: {
          symbol: "none", //去掉箭头
          lineStyle: {
            type: "solid",
            color: "#e76f70", // 这儿设置安全基线颜色
            width: 3,
          },
          data: [
            {
              yAxis: 80,
              lineStyle: { color: "#23bb68" },
              label: {
                color: "#7E7E7E",
                formatter: "美国标准",
                position: "insideEndTop",
                fontSize: 12,
              },
            },
          ],
          label: {
            show: true,
          },
        },
      },

      {
        name: "室外",
        type: "line",
        stack: "Total",
        data: data2,
      },
    ],
  });
};

const getQuYu = async () => {
  console.log("getQuYu触发");
  let obj = {
    dataType: "hour",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "数据分析",
    indicatorName: "办公区域-趋势",
    thirdType: "co2",
  };

  let obj4 = {
    dataType: "scalar",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "",
    indicatorName: "办公区域",
    thirdType: "",
  };
  let data = []; // 时间
  let data1 = []; // type1数据
  let data2 = []; // type2数据
  let data3 = []; // type3数据
  let res = await Analysis(obj);
  let res4 = await Scalar(obj4);
  console.log(res, "11111111");
  console.log(res4, "22222222222");
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(item.hour);
    });
  }
  if (res4.code == 200) {
    state.shu3 = res4.data.scalarList[0].data;
    state.wen3 = res4.data.scalarList[1].data;
    // state.er3 = res4.data.scalarList[3].data
    // state.pm3 = res4.data.scalarList[4].data
    // state.shi3 = res4.data.scalarList[2].data
  }
  let myChart3 = echarts.init(document.getElementById("main3"));
  myChart3.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      icon: "rect",

      itemWidth: 20,
      itemHeight: 1,
      data: ["室外", "室内"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",

      boundaryGap: false,
      data: [
        "00:00",
        "02:00",
        "04:00",
        "06:00",
        "08:00",
        "10:00",
        "12:00",
        "14:00",
        "16:00",
        "18:00",
        "20:00",
        "22:00",
        "24:00",
      ],
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
      },
      {
        name: "室外",
        type: "line",
        stack: "Total",

        data: data2,
        itemStyle: {
          opacity: 0,
        },
      },
    ],
  });
};

const getShangYe = async () => {
  console.log("getShangYe触发");
  let obj = {
    dataType: "hour",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "数据分析",
    indicatorName: "商业区域-趋势",
    thirdType: "co2",
  };

  let obj4 = {
    dataType: "scalar",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "",
    indicatorName: "办公区域",
    thirdType: "",
  };
  let data = []; // 时间
  let data1 = []; // type1数据
  let data2 = []; // type2数据
  let data3 = []; // type3数据
  let res = await Analysis(obj);
  let res4 = await Scalar(obj4);
  console.log(res, "11111111res");
  console.log(res4, "22222222222res4");
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(item.hour);
    });
  }
  if (res4.code == 200) {
    state.shu4 = res4.data.scalarList[0].data;
    state.wen4 = res4.data.scalarList[1].data;
    // state.er4 = res4.data.scalarList[3].data
    // state.pm4 = res4.data.scalarList[4].data
    // state.shi4 = res4.data.scalarList[2].data
  }
  let myChart4 = echarts.init(document.getElementById("main4"));
  myChart4.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["室外1", "室内"],
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "02:00",
        "04:00",
        "06:00",
        "08:00",
        "10:00",
        "12:00",
        "14:00",
        "16:00",
        "18:00",
        "20:00",
        "22:00",
        "24:00",
      ],
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
      },
      {
        name: "室外",
        type: "line",
        stack: "Total",

        data: data2,
        itemStyle: {
          opacity: 0,
        },
      },
    ],
  });
};
</script>

<style lang="less" scoped>
.box {
  display: flex;

  .card-01 {
    margin-left: 50px;
    width: 904px;
    height: 302px;
    position: relative;

    .zhpj {
      position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 890px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .echarts-01 {
      margin-top: 70px;
      margin-left: 10px;
      width: 77px;
      height: 59px;
      border: 1px solid #7f7f7f;
      border-radius: 8px;
      display: flex;
      position: relative;

      .lh-css {
        margin: auto;
        font-family: SourceHanSansSC-regular;
        font-weight: 800;
        color: #fecc30;
        font-size: 24px;
      }

      .wdsd-css {
        display: flex;
        position: absolute;
        margin-left: 100px;

        .dushu-01 {
          margin-bottom: 32px;
        }

        .wendu {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }

        .dushu {
          font-family: SourceHanSansSC-regular;
          font-weight: normal;
          color: #277bcb;
          font-size: 22px;
          margin-bottom: 4px;

          .spancdu {
            color: #7e7e7e;
            font-size: 12px;
          }
        }

        .fangwei {
          color: #7e7e7e;
          font-size: 12px;
          margin-left: -9px;
        }

        .eyht {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }
      }
    }

    #main {
      margin-left: 280px;
      bottom: 70px;
    }

    .select-css {
      position: absolute;
      width: 100px;
      bottom: 190px;
      margin-left: 605px;
    }

    .selectRiqi {
      position: absolute;
      bottom: 190px;
      margin-left: 725px;
      width: 144px;

      :deep(.el-input__inner) {
        width: 140px;
      }
    }

    .title-echrts {
      position: absolute;
      bottom: 203px;
      margin-left: 290px;
      font-size: 14px;
      color: #7f7f7f;
    }

    .echats-main {
      display: flex;
    }
  }

  .card-02 {
    margin-left: 50px;
    width: 904px;
    height: 980px;
    margin-top: 24px;

    .zhpj {
      // position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 904px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .bangong {
      position: absolute;
      margin-top: 15px;
      margin-left: 16px;
      font-size: 16px;
      color: #7f7f7f;
    }

    .bangong1 {
      margin-top: 20px;
      padding-bottom: 20px;
      margin-left: 16px;
      font-size: 16px;
      color: #7f7f7f;
    }

    .echarts-01 {
      margin-top: 50px;
      margin-left: 10px;
      width: 77px;
      height: 59px;
      border: 1px solid #7f7f7f;
      border-radius: 8px;
      display: flex;
      position: relative;

      .lh-css {
        margin: auto;
        font-family: SourceHanSansSC-regular;
        font-weight: 800;
        color: #fecc30;
        font-size: 24px;
      }

      .wdsd-css {
        display: flex;
        position: absolute;
        margin-left: 100px;

        .dushu-01 {
          margin-bottom: 32px;
        }

        .wendu {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }

        .dushu {
          font-family: SourceHanSansSC-regular;
          font-weight: normal;
          color: #277bcb;
          font-size: 22px;
          margin-bottom: 4px;

          .spancdu {
            color: #7e7e7e;
            font-size: 12px;
          }
        }

        .fangwei {
          color: #7e7e7e;
          font-size: 12px;
          margin-left: -9px;
        }

        .eyht {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }
      }
    }

    .echarts-02 {
      margin-left: 10px;
      width: 77px;
      height: 59px;
      border: 1px solid #7f7f7f;
      border-radius: 8px;
      display: flex;
      position: relative;

      .lh-css {
        margin: auto;
        font-family: SourceHanSansSC-regular;
        font-weight: 800;
        color: #fecc30;
        font-size: 24px;
      }

      .wdsd-css {
        display: flex;
        position: absolute;
        margin-left: 100px;

        .dushu-01 {
          margin-bottom: 32px;
        }

        .wendu {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }

        .dushu {
          font-family: SourceHanSansSC-regular;
          font-weight: normal;
          color: #277bcb;
          font-size: 22px;
          margin-bottom: 4px;

          .spancdu {
            color: #7e7e7e;
            font-size: 12px;
          }
        }

        .fangwei {
          color: #7e7e7e;
          font-size: 12px;
          margin-left: -9px;
        }

        .eyht {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }
      }
    }

    #main2 {
      margin-left: 280px;
      bottom: 70px;
    }

    #main3 {
      margin-left: 280px;
      bottom: 70px;
    }

    #main4 {
      margin-left: 280px;
      bottom: 70px;
    }

    .select-css {
      display: flex;
      position: absolute;
      width: 100px;
      bottom: 240px;
      margin-left: 605px;
    }

    .selectRiqi {
      position: absolute;
      bottom: 240px;
      margin-left: 725px;
      width: 144px;

      :deep(.el-input__inner) {
        width: 140px;
      }
    }

    .title-echrts {
      position: absolute;
      bottom: 250px;
      margin-left: 290px;
      font-size: 14px;
      color: #7f7f7f;
    }

    .echats-main {
      display: flex;
      position: relative;
      border-bottom: 1px dotted #dbe0ed;

      .xuxian {
        border-bottom: 1px dotted #dbe0ed;
      }
    }
  }

  .card-03 {
    width: 100%;
    height: 145px;
    margin-left: 10px;

    .zhpj {
      // position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 890px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 600;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .switch-css {
      display: flex;
      margin-top: 15px;
      justify-content: space-between;
      width: 80%;
      :deep(.el-switch.is-checked .el-switch__core) {
        border-color: #8faadc;
        background-color: #8faadc;
      }

      span {
        margin-right: 20px;
      }
    }
  }

  .card-04 {
    width: 100%;
    margin-left: 10px;
    margin-top: 20px;
    height: 700px;
    display: flex;

    .zhpj {
      display: flex;
      // position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 890px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .anniu > div:first-child {
      margin-left: 330px;
    }

    .anniu {
      display: flex;

      .bccolorDiv {
        width: 80px;
        height: 30px;
        background-color: #dbe0ed;
        border-radius: 4px;
        position: relative;
        margin-left: 20px;

        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #4d62a5;
        }
      }

      .Div {
        width: 80px;
        height: 30px;
        background-color: #ebebeb;
        border-radius: 4px;
        position: relative;
        margin-left: 20px;

        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .block {
      margin-top: 40px;
      margin-left: 590px;
    }
  }

  .card-05 {
    width: 100%;
    margin-left: 10px;
    margin-top: 20px;
    height: 420px;

    .zhpj {
      display: flex;
      // position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 890px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .select-css {
      display: flex;

      .select01 {
        width: 100px;
        margin-left: 130px;
      }

      .select02 {
        width: 100px;
        margin-left: 30px;
      }

      .block_time {
        margin-left: 20px;
      }
    }

    .main6 {
      // .dwxshi {
      // margin-top: 80px;
      // }

      margin-top: 50px;
    }
  }
}
</style>